<template>
  <div class="header">
      <div class="left">
          <span class="iconfont " @click="viewinfo">&#xe61a;</span>
      </div>
      <div class="middle">
          <h3>I nerver dreamed for success,I worked it !</h3>
      </div>
      <router-link to="/City">
        <div class="right">
            <span><span class="iconfont bak-icon">&#xe611;</span>{{this.city}}</span>
        </div>
      </router-link>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState(['city'])
  },
  methods:{
    viewinfo:function(){
      this.$emit("tobus")
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/commonstyl.styl'
  .header
    height:.96rem
    line-height:.96rem
    display:flex
    background:$bgColor
    color:rgb(221,154,92)
    .left
      width:.68rem
      float:left
      text-align:center
      .iconfont
        font-size .5rem
    .middle
      flex:1
    .right
      min-width:1.1rem
      float:right
      color:#fff
</style>
